<template>
  <van-pull-refresh
    :success-duration="1500"
    @refresh="onRefresh"
    v-model="refreshing"
  >
    <van-list
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
      v-model="loading"
    >
      <article-item
        v-for="(article,index) in articles"
        :key="index"
        :article="article"
        @click.native="goArticleDetail(article.art_id)"
       />
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { getArticles } from "../../../network/home";
import ArticleItem from './article-item'

export default {
  name: "ArticleList",
  components: {ArticleItem},
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      articles: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: null
    };
  },
  methods: {
    //下拉刷新
    async onRefresh() {
      const result = await getArticles({
        channel_id: this.channel.id, // 频道 ID
        timestamp: Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳
        with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
      });
      console.log(result);
      this.articles = [...result.data.results, ...this.articles];
      this.refreshing = false;
    },

    onLoad() {
      this.loadCurrentArticles();
    },
    //获取文章
    async loadCurrentArticles() {
      const result = await getArticles({
        channel_id: this.channel.id, // 频道 ID
        timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳，timestamp 相当于页码，请求最新数据使用当前最新时间戳，下一页数据使用上一次返回的数据中的时间戳
        with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
      });
      // console.log(result);
      this.articles = [...this.articles, ...result.data.results];
      // 3. 设置本次加载状态结束，它才可以判断是否需要加载下一次，否则就会永远的停在这里
      this.loading = false;

      // 4. 数据全部加载完成
      if (result.data.results.length) {
        // 更新获取下一页数据的页码
        this.timestamp = result.data.pre_timestamp;
      } else {
        // 没有数据了，把加载状态设置结束，不再触发加载更多
        this.finished = true;
      }
    },
    //去到文章详情页面
    goArticleDetail(articleId) {
      this.$router.push(`/article/${articleId}`)
      // console.log('点击')
    }
  }
};
</script>

<style scoped lang="stylus">
.van-pull-refresh
  position fixed
  top 90px
  right 0
  left 0
  bottom 50px
  overflow scroll
</style>